<template>
	<view>
		<view class="liketop">
			<view class="liketleft">
				<image src="../../static/icon_cha.png"></image>
				<text class="ml5">已有9个行程</text>
			</view>
			<view class="liketright" @click="removeall">
				<image src="../../static/77.png"></image>
				<text class="rtext ml5">历史</text>
			</view>
		</view>
		<view class="jouritem" v-for="(item,index) in jourlist" :key=index>
			<view class="p10">
				<view class="dp alcenter">
					<image src="../../static/92.png" class="minilogo"></image>
					<text class="ml5">{{item.time}}</text>
					<text class="ml5">{{item.cooktype}}</text>
				</view>
				<view class="dp alcenter mt5">
					<image src="../../static/91.png" class="minilogo"></image>
					<text class="ml5 f14">{{item.address}}</text>
				</view>
			</view>
			<image :src="item.img" class="itemimg"></image>
			<view class="dp jsbewteen itembottom">
				<view class="dp fdcolumn">
					<text class="fwb">{{item.goodname}}</text>
					<text class="cF07C66">￥{{item.price}}/桌</text>
				</view>
				<view class="dp fdcolumn alcenter" @click="dialtel(item.telname,item.telnum)">
					<image src="../../static/93.png" class="telimg"></image>
					<text class="cf1c887">拨打电话</text>
				</view>
			</view>
			<button class="mt10 myaccount">我的账单</button>
		</view>
	</view>
</template>

<script>
	import goods from "@/json/goods"
	export default {
		data() {
			return {
				jourlist: [] ,//大厨列表
				showing:true //是否可以下拉刷新
			}
		},
		methods: {
			//点击拨打电话
dialtel(name,num){
	uni.showModal({
	    title: name,
	    content: num+"",
		confirmColor:"#F07C66",
		confirmText:"拨打电话",
	    success: function (res) {
	        if (res.confirm) {
	          uni.makePhoneCall({
	              phoneNumber: num+"" //拨打的电话
	          });
	        } else if (res.cancel) {
	            console.log('用户点击取消');
	        }
	    }
	});
}
		},
		//触底事件
		onReachBottom() {
			let nearr = goods.newjourlist;
			//弹出框
			wx.showToast({
				title: '加载中',
				icon: 'loading',
				duration: 2000
			})
			if (this.showing) {
				this.jourlist = this.jourlist.concat(nearr)
			} 
			//判断如果最后一次数据,长度小于4 说明下一页没有数据了
			if(nearr.length<4){
				this.showing=false   //不能请求
			}
		},
		onLoad() {
			this.jourlist = goods.jourlist
		}
	}
</script>

<style>
	.liketop {
		display: flex;
		justify-content: space-between;
		padding: 10px;
	}

	.liketleft image {
		width: 15px;
		height: 15px;
	}

	.liketright image {
		width: 15px;
		height: 15px;
	}

	.jouritem {
		border-radius: 10px;
		box-shadow: 1px 1px 5px 1px #ccc;
		width: 92%;
		margin: 12px auto;
		padding: 0 0 15px 0
	}

	.itemimg {
		width: 100%;
		height: 150px;
	}

	.telimg {
		width: 20px;
		height: 20px;
	}

	.itembottom {
		padding: 0 15px;
		margin: 5px 0;
	}

	.myaccount {
		color: #fff;
		background-color: #FF6855;
		width: 90%;
		margin: auto;
	}
</style>
